<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">
<head>
    <title>addBlog</title>
    <link rel="stylesheet" type="text/css" th:href="@{/static/layui/css/layui.css}"/>
</head>

<body>

    <script th:src="@{/static/layui/layui.js}" type="text/javascript" charset="utf-8"></script>
    <script th:src="@{/static/jquery-2.1.4.js}" type="text/javascript" charset="utf-8"></script>
    <script th:src="@{/static/mylayer.js}" type="text/javascript" charset="utf-8"></script>
    <script th:src="@{/static/kindeditor/kindeditor.js}" type="text/javascript" charset="utf-8"></script>

    <form class="layui-form" action="">
        <div class="layui-form-item">
            <label class="layui-form-label">博客题目</label>
            <div class="layui-input-block">
                <input type="text" name="name" autocomplete="off" placeholder="请输入题目" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">博客封面</label>
            <div class="layui-input-block">
                <div class="layui-upload-list">
                    <input type="hidden" name="image" id="imageID">
                    <img class="layui-upload-img" id="ID-upload-demo-img" width="150px" height="150px">
                    <div id="ID-upload-demo-text"></div>
                </div>
                <button type="button" class="layui-btn" id="uploadID">
                    <i class="layui-icon layui-icon-upload">封面上传</i>
                </button>
            </div>
        </div>

        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">博客内容</label>
            <div class="layui-input-block">
                <textarea id="contentId" name="content" placeholder="请输入内容" class="layui-textarea"></textarea>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">博客类型</label>
            <div class="layui-input-block">
                <select id="typeId" name="typeId">
                    <option value>请选择类型</option>
                </select>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="submit" class="layui-btn" lay-submit="" lay-filter="submitDemo">添加</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>

    <script>
        var kindEditorParams = {
            afterBlur: function () {
                this.sync();
            }
        };
        var editor = KindEditor.create('#contentId',kindEditorParams);

        layui.use(['form','upload'], function () {
            var form = layui.form;
            var upload = layui.upload;

            // 单图片上传
            var uploadInst = upload.render({
                elem: '#uploadID',
                url: '/upload', // 实际使用时改成您自己的上传接口即可。
                before: function(obj){
                    // 预读本地文件示例，不支持ie8
                    obj.preview(function(index, file, result){
                        $('#ID-upload-demo-img').attr('src', result); // 图片链接（base64）
                    });
                },
                done: function(result){
                    // 若上传失败
                    if(result.code == 0){
                        console.log(result);
                        $('#imageID').val(result.data)
                    } else {
                        mylayer.errorMsg('上传失败');
                    }
                    $('#ID-upload-demo-text').html(''); // 置空上传失败的状态
                },
                error: function(){
                    // 演示失败状态，并实现重传
                    var demoText = $('#ID-upload-demo-text');
                    demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                    demoText.find('.demo-reload').on('click', function(){
                        uploadInst.upload();
                    });
                },
            });

            //监听提交
            form.on('submit(submitDemo)', function(data){
                // layer.alert(JSON.stringify(data.field), {
                //     title: '最终的提交信息'
                // })
                console.log(data.field);
                $.post(
                    '/blog/add',
                    data.field,
                    function (result) {
                        console.log(result);
                        if(result.code == 0) {
                            mylayer.okMsg(result.msg);
                            setInterval(function () {
                                var index = parent.layer.getFrameIndex(window.name);
                                parent.layer.close(index);
                                window.parent.location.reload();
                            }, 2000);
                        }
                    },
                    'json'
                )
                return false;
            });

            $(function () {
                $.post(
                    '/type/selectAll',
                    {'type':$(this).val()},
                    function (jsonObj) {
                        console.log(jsonObj);
                        $(jsonObj).each(function () {
                            $('#typeId').append('<option value="' + this.id + '">' + this.name + '</option>');
                        })
                        layui.use(['form'], function () {
                            var form = layui.form;
                            form.render();
                        });
                    },
                    'json'
                )
            });

        })

    </script>

</body>
</html>
